<template>
  <div class="selectPackage">
    <el-row style="margin: 10px 0">
      <el-col :lg="7" :md="11" style="margin-right: 20px;margin-top: 10px" v-for="v in taocanAll">
        <el-card class="box-card">
          <el-radio v-model="radio" :label="v.id" @change="radio_change(v)">
            <span v-html="v.Introduce" style="line-height: 30px;"></span><el-tag size="mini">{{ v.tag }}</el-tag>
          </el-radio>
        </el-card>
      </el-col>
<!--      <el-col :lg="7" :md="11" style="margin-right: 20px;margin-top: 10px">
        <el-card class="box-card">
          <el-radio disabled v-model="radio" label="内部群 20/月" @change="radio_change('20')">
            20/月<br><br>
            包含一个<el-link type="warning">内部群</el-link>、大群 <el-tag size="mini">实惠</el-tag>
          </el-radio>
        </el-card>
      </el-col>-->

<!--      <el-col :lg="7" :md="11" style="margin-right: 20px;margin-top: 10px">
        <el-card class="box-card">
          <el-radio v-model="radio" label="群主群 50/月" @change="radio_change('50')">
            50/月<br><br>
            包含一个群主群、大群 <el-tag size="mini">体验</el-tag>
          </el-radio>
        </el-card>
      </el-col>

      <el-col :lg="7" :md="11" style="margin-right: 20px;margin-top: 10px">
        <el-card class="box-card">
          <el-radio v-model="radio" label="群主群 120/季" @change="radio_change('120')">
            120/季<br><br>
            包含一个群主群、大群 <el-tag size="mini">老铁</el-tag>
          </el-radio>
        </el-card>
      </el-col>

      <el-col :lg="7" :md="11" style="margin-right: 20px;margin-top: 10px">
        <el-card class="box-card">
          <el-radio v-model="radio" label="群主群 300/年" @change="radio_change('300')">
            300/年<br><br>
            包含一个群主群、大群 <el-tag size="mini">推荐</el-tag>
          </el-radio>
        </el-card>
      </el-col>-->

    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-button type="primary" plain  @click="btn_top">上一步</el-button>
      <el-button type="primary" :disabled="button_disabled" @click="btn_next">下一步</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "SelectPackage",
  data(){
    return {
      radio:'',
      button_disabled:true,
      price:'',
    }
  },
  methods:{
    btn_top(){
      this.$emit('taocan_event',1,1,...this.taocanAll.filter(v=>v.id==this.radio),this.price)
    },
    btn_next(){
      this.$emit('taocan_event',3,3 ,...this.taocanAll.filter(v=>v.id==this.radio),this.price);
    },
    radio_change(v){
      if(this.radio){
        this.price=v.price
        this.button_disabled=false;
        this.$emit('taocan_event',2,2,v,this.price);
      }
    }
  },
  props:{
    taocanAll:Array
  }
}
</script>

<style scoped>
.el-radio{
  white-space: normal;
}
</style>
